<template>
  <div class="map-contant" :id="el">
    <slot></slot>
  </div>
</template>
<script>
// import { makeDE, showMapInfo } from "@/components/map/addFunction/function-tool";
// ---------- 地图功能 --------------
// import { addDC } from "@/Icon/map/DistrictCluster/test";
// import { createPoints } from "@/Icon/map/DistrictCluster/function/createPoints";
// import { addMassMark } from "@/Icon/map/MassMark/main";
export default {
  data() {
    return {
      center: this.mapInfo.center,
      zoom: this.mapInfo.zoom,
      enable: this.mapInfo.enable,
      style: this.mapInfo.style,
      adcode: this.mapInfo.adcode,
      map_content: null,
      data_content: [
      ],
    };
  },
  mounted() {
    let map = new AMap.Map(this.el, this.map_info);
    // ---------- 地图功能 -----------------
    // 数据
    // this.data_content = createPoints(map.getCenter(), 1000);
    // 聚合
    // addDC(map, this.data_content);
    // addMassMark(map, this.data_content, this);
    // ---------- 地图事件 -------------
    map.on(
      "zoomchange",
      function () {
        let zoom = map.getZoom();
        if (zoom > 6) {
          this.zoombig();
        } else {
          this.zoomsmall();
        }
      },
      this
    );
  },
  computed: {
    map_info: function () {
      return {
        center: this.center, //地图中心
        zoom: this.zoom, //地图级别
        mapStyle: this.style,
        rotateEnable: this.enable,
        dragEnable: this.enable,
        scrollWheel: this.enable,
        doubleClickZoom: this.enable,
        viewMode: "2D",
      };
    },
  },
  props: {
    el: {
      type: String,
      default: "map",
    },
    mapInfo: {
      type: Object,
      default: function () {
        return {
          center: [116.493846, 40.263609],
          zoom: 8,
          enable: true,
          // style: "amap://styles/dark",
          style: "amap://styles/73767376d1e21c535f3e909bdd72a3fa",
          adcode: 110000,
        };
      },
    },
    addfunction: {
      type: String,
      default: "feature-adcode",
    },
  },
  methods: {
    // ----------- 路由 ------------
    toTower(e) {
      let TowerCode = e.target.w.TowerCode;
      this.$router.push({ name: "tower", query: { TowerCode: TowerCode } });
    },
    zoombig() {
      this.$emit("zoombig");
    },
    zoomsmall() {
      this.$emit("zoomsmall");
    },
  },
};
</script>
<style scoped>
.map-contant {
  height: 100%;
  width: 100%;
}
</style>
